<div ng-include="template" ng-controller="BuilderController"></div>
<div ng-include="template" ng-controller="PullImageController"></div>

<h2>Images:</h2>

<div>
    <ul class="nav nav-pills pull-left">
        <li class="dropdown">
            <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" data-target="#">Actions <b class="caret"></b></a>
            <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
                <li><a tabindex="-1" href="" ng-click="removeAction()">Remove</a></li>
            </ul>
        </li>
        <li><a data-toggle="modal" data-target="#pull-modal" href="">Pull</a></li>
    </ul>

    <div class="pull-right form-inline">
        <input type="text" class="form-control" id="filter" placeholder="Filter" ng-model="filter"/> <label class="sr-only" for="filter">Filter</label>
    </div>
</div>
<table class="table table-striped">
    <thead>
        <tr>
            <th><label><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()" /> Select</label></th>
            <th>
                <a href="#/images/" ng-click="order('Id')">
                    Id
                    <span ng-show="sortType == 'Id' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                    <span ng-show="sortType == 'Id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                </a>
            </th>
            <th>
                <a href="#/images/" ng-click="order('RepoTags')">
                    Repository
                    <span ng-show="sortType == 'RepoTags' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                    <span ng-show="sortType == 'RepoTags' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                </a>
            </th>
            <th>
                <a href="#/images/" ng-click="order('VirtualSize')">
                    VirtualSize
                    <span ng-show="sortType == 'VirtualSize' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                    <span ng-show="sortType == 'VirtualSize' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                </a>
            </th>
            <th>
                <a href="#/images/" ng-click="order('Created')">
                    Created
                    <span ng-show="sortType == 'Created' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                    <span ng-show="sortType == 'Created' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                </a>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="image in (filteredImages = (images | filter:filter | orderBy:sortType:sortReverse))">
            <td><input type="checkbox" ng-model="image.Checked" /></td>
            <td><a href="#/images/{{ image.Id }}/?tag={{ image|repotag }}">{{ image.Id|truncate:20}}</a></td>
            <td>{{ image|repotag }}</td>
            <td>{{ image.VirtualSize|humansize }}</td>
            <td>{{ image.Created * 1000 | date: 'yyyy-MM-dd' }}</td>
        </tr>
    </tbody>
</table>
